<div class="content__title">
    <h1>
        Loading Spin
    </h1>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Basic</ng-template>
            <ng-template #body>
                <div class="mb-sm">
                    <nz-spin [nzSize]="'small'" class="d-inline-block mr-sm"></nz-spin>
                    <nz-spin class="d-inline-block mr-sm"></nz-spin>
                    <nz-spin [nzSize]="'large'" class="d-inline-block mr-sm"></nz-spin>
                </div>
                <div class="mb-sm">
                    <nz-spin [nzTip]="'Loading...'" [nzSpinning]="loading">
                        <nz-alert [nzType]="'info'" [nzMessage]="'Alert message title'" [nzDescription]="'Further details about the context of this alert.'">
                        </nz-alert>
                    </nz-spin>
                </div>
                Loading state:
                <nz-switch [(ngModel)]="loading"></nz-switch>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Table</ng-template>
            <ng-template #extra>
                <button nz-button (click)="load()" [nzType]="'dashed'">
                    <span>Load data</span>
                </button>
            </ng-template>
            <ng-template #body>
                <nz-spin [nzTip]="'Loading...'" [nzSpinning]="dataLoading">
                    <nz-table #nzTable [nzDataSource]="data" [nzPageSize]="5">
                        <thead nz-thead>
                            <tr>
                                <th nz-th><span>Name</span></th>
                                <th nz-th><span>Age</span></th>
                                <th nz-th><span>Address</span></th>
                            </tr>
                        </thead>
                        <tbody nz-tbody>
                            <tr nz-tbody-tr *ngFor="let data of nzTable.data">
                                <td nz-td>
                                    <a>{{data.name}}</a>
                                </td>
                                <td nz-td>{{data.age}}</td>
                                <td nz-td>{{data.address}}</td>
                            </tr>
                        </tbody>
                    </nz-table>
                </nz-spin>
            </ng-template>
        </nz-card>
    </div>
</div>
